<template>
	<el-container style="padding: 20px">
		<el-header>
			<div>
				<el-button @click="add('新增')" size="mini" type="primary" icon="el-icon-circle-plus-outline">新 增</el-button>
				<el-button @click="exportFund()" size="mini" type="primary" icon="el-icon-folder-opened">导 出</el-button>
			</div>
			<el-form>
				<el-form-item label="产品搜索：">
					<el-input v-model.trim="form.fundFullName" @input="searchClick()" size="medium" style="width: 170px"></el-input>
				</el-form-item>
				<el-form-item label="产品类型：" style="margin-left: 20px">
					<el-select
						v-model.trim="form.fundType"
						filterable
						clearable
						placeholder="请选择"
						@change="searchClick()"
						size="medium"
						style="width: 170px"
					>
						<el-option key="" label="--请选择--" value=""> </el-option>
						<el-option v-for="item in fundTypeList" :key="item.typeCode" :label="item.typeName" :value="item.typeCode"> </el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="产品运作状态：" style="margin-left: 20px">
					<el-select
						v-model="form.status"
						filterable
						clearable
						placeholder="请选择"
						@change="searchClick()"
						size="medium"
						style="width: 170px"
					>
						<el-option key="" label="--请选择--" value=""> </el-option>
						<el-option
							v-for="(item, index) in fundOpStatusList"
							:key="item.typeCode + index"
							:label="item.typeName"
							:value="item.typeCode"
						>
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="责任人：" style="margin-left: 20px">
					<el-select
						style="width: 170px"
						v-model="form.personLiableId"
						placeholder="请选择"
						@change="searchClick()"
						filterable
						clearable
						size="medium"
					>
						<el-option key="" label="--全部--" value=""> </el-option>
						<el-option
							v-for="(item, index) in managerList"
							:key="index + 'a'"
							:label="item.personLiableName"
							:value="item.personLiableId"
						/>
					</el-select>
				</el-form-item>
				<el-form-item label="复核人：" style="margin-left: 20px">
					<el-select
						style="width: 170px"
						v-model="form.checkLiableId"
						placeholder="请选择"
						@change="searchClick()"
						filterable
						clearable
						size="medium"
					>
						<el-option key="" label="--全部--" value=""> </el-option>
						<el-option
							v-for="(item, index) in checckPersonList"
							:key="index + 'a'"
							:label="item.checkLiableName"
							:value="item.checkLiableId"
						/>
					</el-select>
				</el-form-item>
			</el-form>
		</el-header>
		<el-main>
			<div style="display: flex; margin-bottom: 16px">
				<el-dropdown>
					<el-button size="small"> 清除筛选条件<i class="el-icon-arrow-down el-icon--right"></i> </el-button>
					<el-dropdown-menu slot="dropdown" trigger="click">
						<el-dropdown-item v-for="(item, index) in listItem" :key="index" @click.native="resetDateFilter(item.value)">{{
							item.key
						}}</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
				<el-button @click="clearFilter" style="margin-left: 16px" size="small">清除所有筛选条件</el-button>
			</div>
			<el-table
				:data="fundList"
				border
				style="width: 100%"
				:header-cell-style="{ background: '#FAFAFA' }"
				ref="filterTable"
				v-loading="searchLoading"
				element-loading-text="正在加载数据，请耐心等待......"
				element-loading-spinner="el-icon-loading"
				element-loading-background="rgba(0, 0, 0, 0.8)"
			>
				<el-table-column
					prop="fundCode"
					label="产品代码"
					width="150"
					fixed
					sortable
					column-key="fundCode"
					:filters="returnFilterArray('fundCode')"
					:filter-method="filterHandler"
					filter-placement="bottom"
				>
				</el-table-column>

				<el-table-column
					prop="fundFullName"
					label="产品名称"
					fixed
					sortable
					column-key="fundFullName"
					:filters="returnFilterArray('fundFullName')"
					:filter-method="filterHandler"
					filter-placement="bottom"
				>
					<template slot-scope="scope">
						<hintCom :item="scope.row" property="fundFullName" :index="scope.$index" />
					</template>
				</el-table-column>

				<el-table-column
					prop="fundTypeName"
					label="产品类型"
					width="100"
					column-key="fundTypeName"
					:filters="returnFilterArray('fundTypeName')"
					:filter-method="filterHandler"
					filter-placement="bottom"
				>
					<template slot-scope="scope">
						<hintCom :item="scope.row" property="fundTypeName" :index="scope.$index" />
					</template>
				</el-table-column>

				<el-table-column
					prop="status"
					:formatter="operationStatus"
					column-key="status"
					label="产品运作状态"
					width="120"
					:filters="returnFilterArray('status')"
					:filter-method="filterHandler"
					filter-placement="bottom"
				>
				</el-table-column>

				<el-table-column
					prop="moduleStatus"
					:formatter="formatterCheckStatus"
					column-key="moduleStatus"
					label="复核状态"
					width="120"
					:filters="returnFilterArray('moduleStatus')"
					:filter-method="filterHandler"
					filter-placement="bottom"
				>
				</el-table-column>

				<el-table-column
					prop="personLiableName"
					label="责任人"
					width="120"
					column-key="personLiableName"
					:filters="returnFilterArray('personLiableName')"
					:filter-method="filterHandler"
					filter-placement="bottom"
				>
					<template slot-scope="scope">
						<hintCom :item="scope.row" property="personLiableName" :index="scope.$index" />
					</template>
				</el-table-column>

				<el-table-column
					prop="checkLiableName"
					label="复核人"
					width="100"
					column-key="checkLiableName"
					:filters="returnFilterArray('checkLiableName')"
					:filter-method="filterHandler"
					filter-placement="bottom"
				>
					<template slot-scope="scope">
						<hintCom :item="scope.row" property="checkLiableName" :index="scope.$index" />
					</template>
				</el-table-column>

				<el-table-column
					prop="establishDate"
					label="合同生效日"
					width="140"
					column-key="establishDate"
					sortable
					:filters="returnFilterArray('establishDate')"
					:filter-method="filterHandler"
					filter-placement="bottom"
				>
					<template slot-scope="scope">
						{{ scope.row.establishDate | timerConversionStr }}
					</template>
				</el-table-column>

				<el-table-column prop="operation" label="操作" fixed="right" width="390">
					<template slot-scope="scope">
						<el-button
							size="mini"
							type="primary"
							icon="el-icon-edit"
							v-if="scope.row.moduleStatus === '0'"
							@click="funditem('完善信息', '1', scope.row)"
						>
							完善信息
						</el-button>

						<el-button
							size="mini"
							type="primary"
							icon="iconfont icon-zhongxinshenqing"
							v-if="scope.row.moduleStatus === '2'"
							@click="funditem('重新申请', '5', scope.row)"
							>重新申请
						</el-button>
						<el-button
							size="mini"
							type="primary"
							v-if="!['0', '2'].includes(scope.row.moduleStatus)"
							@click="funditem('查看', '2', scope.row)"
							icon="el-icon-view"
						>
							查看
						</el-button>
						<el-button
							size="mini"
							type="warning"
							v-if="
								scope.row.moduleStatus === '3' &&
									(scope.row.checkLiableId === name || scope.row.personLiableId === name) &&
									scope.row.status != '40'
							"
							@click="funditem('变更', '3', scope.row)"
							icon="el-icon-edit-outline"
						>
							变更
						</el-button>
						<el-button
							size="mini"
							type="warning"
							v-if="scope.row.moduleStatus === '5' && (scope.row.checkLiableId === name || scope.row.personLiableId === name)"
							@click="funditem('变更', '7', scope.row)"
							class="widths"
							icon="el-icon-edit-outline"
						>
							变更
						</el-button>
						<el-button
							size="mini"
							type="warning"
							v-if="
								scope.row.moduleStatus === '4' &&
									((scope.row.checkLiableId === scope.row.updatedUser && scope.row.personLiableId === name) ||
										(scope.row.checkLiableId === name && scope.row.personLiableId === scope.row.updatedUser))
							"
							@click="funditem('复核', '6', scope.row)"
							icon="el-icon-coordinate"
						>
							复核
						</el-button>
						<el-button
							size="mini"
							type="warning"
							v-if="scope.row.moduleStatus === '1' && scope.row.checkLiableId === name"
							@click="funditem('复核', '4', scope.row)"
							icon="el-icon-coordinate"
						>
							复核
						</el-button>
						<el-button
							type="danger"
							size="mini"
							icon="el-icon-remove"
							v-if="
								scope.row.moduleStatus === '3' &&
									scope.row.status === '10' &&
									(scope.row.checkLiableId === name || scope.row.personLiableId === name)
							"
							@click="funditem('终止', '3', scope.row, '1')"
							>终止
						</el-button>
						<el-button
							type="danger"
							size="mini"
							icon="el-icon-remove"
							v-if="
								scope.row.moduleStatus === '5' &&
									scope.row.status === '10' &&
									(scope.row.checkLiableId === name || scope.row.personLiableId === name)
							"
							@click="funditem('终止', '7', scope.row, '1')"
						>
							终止
						</el-button>
						<el-button
							type="primary"
							size="mini"
							icon="iconfont icon-qingsuan"
							v-if="
								scope.row.moduleStatus === '3' &&
									scope.row.status === '20' &&
									(scope.row.checkLiableId === name || scope.row.personLiableId === name)
							"
							@click="funditem('清算', '3', scope.row, '2')"
							>清算
						</el-button>
						<el-button
							type="primary"
							size="mini"
							icon="iconfont icon-qingsuan"
							v-if="
								scope.row.moduleStatus === '5' &&
									scope.row.status === '20' &&
									(scope.row.checkLiableId === name || scope.row.personLiableId === name)
							"
							@click="funditem('清算', '7', scope.row, '2')"
						>
							清算
						</el-button>
						<el-button
							type="primary"
							size="mini"
							icon="el-icon-success"
							v-if="
								scope.row.moduleStatus === '3' &&
									scope.row.status === '00' &&
									(scope.row.checkLiableId === name || scope.row.personLiableId === name)
							"
							@click="funditem('成立', '3', scope.row, '3')"
							>成立
						</el-button>
						<el-button
							size="mini"
							type="danger"
							icon="el-icon-delete"
							v-if="scope.row.moduleStatus === '0'"
							@click="delInfo(scope.row.fundCode, scope.row.fundSysCode)"
							>删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				background
				:disabled="searchLoading"
				:page-size="paging.size"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
				:current-page="paging.num"
				:page-sizes="paging.sizes"
				layout="sizes,prev,pager,next,jumper,total"
				:total="paging.total"
			/>
		</el-main>
		<managerInfo
			:title="title"
			:addComShow="addComShow"
			@comIsShow="comIsShow"
			@queryFundManagerList="getFundList"
			@comIsShowKey="comIsShowKey"
			ref="managerInfo"
			:key="fundComKey"
		/>

		<el-dialog
			title="选择基金模板"
			:visible.sync="templateShow"
			@before-close="templateCancel"
			:close-on-click-modal="false"
			:close-on-press-escape="false"
			width="35%"
		>
			<div class="templaeClass">
				<el-form label-position="left" label-width="110px">
					<el-form-item label="选择基金" required>
						<el-select
							style="width: 100%"
							v-model="templateForm.fundSysCode"
							filterable
							clearable
							class="templateClass"
							placeholder="选择基金模板"
						>
							<el-option
								v-for="(item, index) in selectFundList"
								:key="index + item.fundSysCode"
								:label="item.fundCode + '-' + item.fundFullName"
								:value="item.fundSysCode"
							>
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="基金代码" required>
						<el-input v-model="templateForm.fundCode" maxlength="6" placeholder="请输入内容"></el-input>
					</el-form-item>
					<el-form-item label="基金名称" required>
						<el-input v-model="templateForm.fundFullName" placeholder="请输入内容"></el-input>
					</el-form-item>
					<el-form-item label="基金简称" required>
						<el-input v-model="templateForm.fundName" placeholder="请输入内容"></el-input>
					</el-form-item>
				</el-form>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button size="small" type="primary" @click="temConfrim(templateForm)">确 定</el-button>
			</span>
		</el-dialog>
	</el-container>
</template>
<script>
	import { fundListData, delFund, expotrtFund, fundAll, copyFund, getAllCheck } from '@/api/productApi/infoMain'
	import managerInfo from './components/index.vue'
	import { getEnum, downloadFile } from '@/api/productApi/file'
	import { mapGetters } from 'vuex'
	import { departmentUser } from '@/api/productApi/fundManager'
	import { debounce } from '@/utils/debounceFunc'
	import { getFundList } from '@/api/productApi/mechanism'
	import { timerConversionStr } from '@/filters/index'
	import { Loading } from 'element-ui'
	import { SpecialReplace } from '@/utils/characters'
	export default {
		name: 'PublicList',
		components: {
			managerInfo
		},
		data() {
			return {
				templateForm: {
					fundCode: '',
					fundFullName: '',
					fundName: '',
					fundSysCode: ''
				},
				title: '',
				addComShow: false,
				fileAddComShow: false,
				form: {
					fundFullName: '',
					fundType: '',
					status: '',
					personLiableId: '',
					fundRaiseType: '1'
				},
				fundOpStatusList: [],
				fundTypeList: [],
				fundList: [],
				managerList: [],
				// 分页配置
				paging: {
					// 显示的条目数
					size: 10,
					// 当前页数
					num: 1,
					total: 0,
					pages: 0,
					sizes: [10, 50, 100, 200]
				},
				fundComKey: 1,
				fileTitle: '',
				selectFundList: [],
				templateShow: false,
				permisData: [],
				listItem: [
					{ key: '产品内部代码', value: 'fundCode' },
					{ key: '产品名称', value: 'fundFullName' },
					{ key: '产品类型', value: 'fundTypeName' },
					{ key: '产品运作状态', value: 'status' },
					{ key: '复核状态', value: 'moduleStatus' },
					{ key: '责任人', value: 'personLiableName' },
					{ key: '复核人', value: 'checkLiableName' },
					{ key: '合同生效日', value: 'establishDate' }
				],
				checckPersonList: [],
				searchLoading: false,
				cacheData: [] // 缓存最新输入的值
			}
		},

		computed: {
			...mapGetters(['name'])
		},

		async created() {
			await this.$store.dispatch('fundStep/setHover')
			await this.getPermisData()
			this.$store.dispatch('fundStep/getFundEumn')
		},

		mounted() {
			this.$nextTick(() => {
				this.getUserOpList()
				this.getProductDictList()
				this.getFundList()
			})
		},
		methods: {
			resetDateFilter(msg) {
				this.$refs.filterTable.clearFilter(msg)
			},
			clearFilter() {
				this.$refs.filterTable.clearFilter()
			},
			returnFilterArray(property) {
				const array = []
				if (['fundFullName', 'fundCode', 'fundTypeName', 'personLiableName', 'checkLiableName'].includes(property)) {
					this.fundList.forEach(item => {
						if (!array.some(items => items.text === item[property]) && !!item[property]) {
							const obj = { text: item[property], value: item[property] }
							array.push(obj)
						}
					})
				} else if (property === 'status') {
					this.fundList.forEach(item => {
						if (!array.some(items => items.value === item[property]) && !!item[property]) {
							const obj = { text: this.operationStatus('', '', item[property], ''), value: item[property] }
							array.push(obj)
						}
					})
				} else if (property === 'moduleStatus') {
					this.fundList.forEach(item => {
						if (!array.some(items => items.value === item[property]) && !!item[property]) {
							const obj = { text: this.formatterCheckStatus('', '', item[property], ''), value: item[property] }
							array.push(obj)
						}
					})
				} else if (property === 'establishDate') {
					this.fundList.forEach(item => {
						if (!array.some(items => items.value === item[property]) && !!item[property]) {
							const obj = { text: timerConversionStr(item[property]), value: item[property] }
							array.push(obj)
						}
					})
				}
				return array
			},
			filterHandler(value, row, column) {
				const property = column['property']
				return row[property] === value
			},

			async getPermisData() {
				await departmentUser().then(res => {
					if (res.msgCode === 'Y') {
						res.data.body.forEach(item => {
							item.ChineName = item.firstName ? item.firstName : ''
						})
						this.permisData = res.data.body
					}
				})
			},

			// 新增
			async add(title) {
				await this.getFundListItem()
				this.title = title
				this.$confirm('是否需要基金模板?', '提示', {
					confirmButtonText: '是',
					cancelButtonText: '否',
					type: 'warning',
					showClose: true,
					closeOnClickModal: true,
					closeOnPressEscape: true,
					distinguishCancelAndClose: true,
					beforeClose: (action, instance, done) => {
						if (action === 'close') {
							done()
						} else if (action === 'cancel') {
							this.comIsShow()
							done()
						} else if (action === 'confirm') {
							this.templateCancel()
							done()
						}
					}
				})
					.then(() => {})
					.catch(() => {})
			},
			temConfrim(obj) {
				if (!obj.fundCode || !obj.fundSysCode || !obj.fundName || !obj.fundFullName) {
					this.$message({ type: 'error', message: '请填写必填参数' })
					return false
				}
				const loadingObj = {
					text: '正在复制，请稍等',
					background: 'rgba(0, 0, 0, 0.8)',
					spinner: 'el-icon-loading'
				}
				Loading.service(loadingObj)
				copyFund({ fundRaiseType: '1', ...obj }).then(res => {
					if (res.msgCode === 'Y') {
						if (res.data.body) {
							this.$refs.managerInfo.templateChange(res.data.body)
							this.$refs.managerInfo.edit('1', res.data.body, '', 0)
							this.templateShow = false
							this.templateForm = {
								fundCode: '',
								fundFullName: '',
								fundName: '',
								fundSysCode: ''
							}
							this.comIsShow()
						} else {
							this.$message({ type: 'error', message: '系统ID生成失败' })
						}
					}
					const loadingInstance = Loading.service(loadingObj)
					this.$nextTick(() => {
						loadingInstance.close()
					})
				})
			},
			templateCancel() {
				this.templateShow = !this.templateShow
				setTimeout(() => {
					this.templateForm = {
						fundCode: '',
						fundFullName: '',
						fundName: '',
						fundSysCode: ''
					}
				})
			},

			// 新增编辑
			comIsShow() {
				this.addComShow = !this.addComShow
			},
			comIsShowKey() {
				++this.fundComKey
			},

			funditem(title, type, obj, isEnterDateHtml) {
				this.title = title
				this.comIsShow()
				this.$refs.managerInfo.edit(type, obj.fundSysCode, isEnterDateHtml)
			},

			// 搜索
			searchClick: debounce(function() {
				this.paging.num = 1
				this.cacheData = [this.form]
				if (!this.searchLoading) {
					this.getFundList()
				}
			}, 500),

			// 枚举类
			async getProductDictList() {
				await getEnum(['fundOperationStatus', 'fundType']).then(res => {
					if (res.msgCode === 'Y') {
						this.fundOpStatusList = res.data.body.fundOperationStatus
						this.fundTypeList = res.data.body.fundType.filter((item, index) => index < 6)
					}
				})
			},

			// 查询：获取拥有某权限的用户信息
			async getUserOpList() {
				await fundAll({ fundRaiseTypes: ['1'] }).then(res => {
					if (res.msgCode === 'Y') {
						this.managerList = res.data.body.filter(item => !!item.personLiableId)
					}
				})
				await getAllCheck({ fundRaiseType: '1' }).then(res => {
					if (res.msgCode === 'Y') {
						this.checckPersonList = res.data.body.filter(item => !!item.checkLiableId)
					}
				})
			},

			delInfo(fundCode, fundSysCode) {
				this.operatorComfirm(() => {
					delFund({ fundSysCode: fundSysCode, fundRaiseType: '1' }).then(res => {
						if (res.msgCode === 'Y') {
							if (this.paging.total === 11) {
								this.paging.num = 1
							}
							this.getFundList()
							this.$message({ message: res.msgDesc, customClass: 'el-messageClass', type: 'success' })
						}
					})
				}, `删除基金代码为${fundCode}的数据(删除后无法恢复)`)
			},

			// 产品运作状态
			operationStatus(row, column, cellValue, index) {
				if (cellValue === '00') {
					return '未成立'
				} else if (cellValue === '10') {
					return '运作中'
				} else if (cellValue === '20') {
					return '清盘中'
				} else if (cellValue === '30') {
					return '已清盘'
				} else if (cellValue === '40') {
					return '募集失败'
				}
			},

			// 初始化产品状态
			formatterCheckStatus(row, column, cellValue, index) {
				if (cellValue === '0') {
					return '创建中'
				} else if (cellValue === '1') {
					return '新增待复核'
				} else if (cellValue === '2') {
					return '新增被驳回'
				} else if (cellValue === '3') {
					return '复核通过'
				} else if (cellValue === '4') {
					return '修改待复核'
				} else if (cellValue === '5') {
					return '修改被驳回'
				}
			},
			// 改变页数
			handleCurrentChange(val) {
				this.paging.num = val
				this.getFundList()
			},

			// 改变条数
			handleSizeChange(val) {
				this.paging.num = 1
				this.paging.size = val
				this.getFundList()
			},

			async getFundListItem() {
				await getFundList({ fundRaiseType: '1' }).then(res => {
					if (res.msgCode === 'Y') {
						res.data.body.forEach(item => {
							if (item.baseInfo) {
								item.fundFullName = item.baseInfo.fundFullName
								item.fundName = item.baseInfo.fundName
								item.fundCode = item.baseInfo.fundCode
							}
						})
						this.selectFundList = res.data.body
					}
				})
			},

			exportFund() {
				expotrtFund(this.form).then(res => {
					if (res.msgCode === 'Y') {
						const file = {
							fid: res.data.body
						}
						downloadFile(file).then(item => {
							if (item.msgCode === 'N') {
								this.$message({ showClose: true, message: '文件不存在', type: 'error' })
								return
							}
							if (!!item && item.msgCode !== 'N') {
								this.$message({
									showClose: true,
									message: '正在打开，请稍等......',
									customClass: 'el-messageClass',
									type: 'success'
								})
								window.open(`/update/download.do?fid=${res.data.body}`)
							} else {
								this.$message({
									showClose: true,
									message: '文件不存在',
									customClass: 'el-messageClass',
									type: 'error'
								})
							}
						})
					}
				})
			},

			getFundList(num) {
				if (SpecialReplace(this.form.fundFullName, false)) {
					return
				}
				if (!num) {
					this.searchLoading = true
				}
				this.cacheData = []
				fundListData(this.form, this.paging)
					.then(res => {
						if (res.msgCode === 'Y') {
							res.data.body.forEach(item => {
								if (item.checkLiableId) {
									if (this.permisData.some(items => items.username === item.checkLiableId)) {
										item.checkLiableName = this.permisData.filter(items => items.username === item.checkLiableId)[0].ChineName
									}
								}
								if (item.personLiableId) {
									if (this.permisData.some(items => items.username === item.personLiableId)) {
										item.personLiableName = this.permisData.filter(items => items.username === item.personLiableId)[0].ChineName
									}
								}
							})
							this.paging.total = res.data.page.total
							this.fundList = res.data.body
						}
					})
					.finally(() => {
						if (!this.cacheData.length) {
							this.searchLoading = false
						}
						if (this.cacheData.length && this.searchLoading) {
							this.getFundList()
						}
					})
			}
		}
	}
</script>
<style lang="scss" scoped src='./index.scss'>
</style>
